import React, { useState, useEffect } from 'react';
import { Button, Layout, Typography, Space } from 'antd';
import { useNavigate } from 'react-router-dom';
import {
  PlayCircleOutlined,
  ReadOutlined,
  SettingOutlined,
  SoundOutlined
} from '@ant-design/icons';
import AnimatedButton from '../components/AnimatedButton';
import AnimatedText from '../components/AnimatedText';
import LegalParticlesBackground from '../components/LegalParticlesBackground';
import LegalDecorations from '../components/LegalDecorations';
import audioService from '../utils/audioService';

const { Content } = Layout;
const { Title } = Typography;

const Home = () => {
  const navigate = useNavigate();
  const [bgmPlaying, setBgmPlaying] = useState(audioService.getPlayingStatus());

  // 初始化音效
  useEffect(() => {
    // 初始化音频服务
    audioService.init();
    
    // 自动播放
    audioService.play();
    setBgmPlaying(audioService.getPlayingStatus());
    
    return () => {
      // 不需要在这里停止音乐，因为我们希望在整个应用中保持播放
    };
  }, []);

  // 播放/暂停背景音乐
  const toggleBgm = () => {
    const isPlaying = audioService.toggle();
    setBgmPlaying(isPlaying);
  };

  return (
    <Layout className="law-adventure-layout">
      {/* 粒子背景 */}
      <LegalParticlesBackground type="dustyParchment" />
      
      {/* 装饰元素 */}
      <LegalDecorations />
      
      <Content 
        style={{ 
          display: 'flex', 
          flexDirection: 'column', 
          justifyContent: 'center', 
          alignItems: 'center',
          minHeight: '100vh',
          padding: '50px 24px',
          position: 'relative',
          zIndex: 1
        }}
      >
        <div style={{ textAlign: 'center', maxWidth: '800px' }}>
          {/* 标题使用动画文字效果 - 增强史诗感 */}
          <AnimatedText
            text="法链云迹"
            type="legal"
            fontSize="120px"
            fontWeight="900"
            fontFamily="var(--title-font)"
            color="var(--primary-color)"
            textAlign="center"
            style={{ 
              marginBottom: '30px',
              textShadow: '0 6px 12px rgba(166, 124, 0, 0.4), 0 12px 24px rgba(166, 124, 0, 0.3), 0 0 8px rgba(255, 215, 0, 0.6)',
              letterSpacing: '8px',
              transform: 'scale(1.05)',
              filter: 'drop-shadow(0 0 10px rgba(255, 215, 0, 0.5))',
              WebkitTextStroke: '2px rgba(139, 0, 0, 0.2)',
              animation: 'pulse 3s infinite'
            }}
          />
          
          {/* 添加关键帧动画 */}
          <style jsx="true">{`
            @keyframes pulse {
              0% { transform: scale(1.05); filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.5)); }
              50% { transform: scale(1.08); filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.8)); }
              100% { transform: scale(1.05); filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.5)); }
            }
          `}</style>
          
          <AnimatedText
            text="寓教于乐的法律知识普及游戏"
            type="fade"
            delay={0.4}
            fontSize="24px"
            color="var(--accent-color)"
            fontFamily="var(--body-font)"
            textAlign="center"
            style={{ marginBottom: '60px' }}
          />
          
          <Space direction="vertical" size="large" style={{ width: '100%' }}>
            {/* 开始游戏按钮 */}
            <AnimatedButton 
              style="adventure"
              type="primary" 
              size="large"
              icon={<PlayCircleOutlined />}
              onClick={() => navigate('/game-select')}
            >
              开始游戏
            </AnimatedButton>
            
            {/* 玩法介绍按钮 */}
            <AnimatedButton
              style="legal" 
              type="default" 
              size="large"
              icon={<ReadOutlined />}
              onClick={() => navigate('/tutorial')}
            >
              玩法介绍
            </AnimatedButton>
            
            {/* 设置按钮 */}
            <AnimatedButton 
              style="parchment"
              type="default" 
              size="large"
              icon={<SettingOutlined />}
              onClick={() => navigate('/settings')}
            >
              设置
            </AnimatedButton>
            
            {/* 音乐控制 */}
            <div style={{ marginTop: '40px' }}>
              <Button 
                type="link" 
                onClick={toggleBgm}
                icon={bgmPlaying ? <SoundOutlined /> : <SoundOutlined style={{ color: '#999' }} />}
                style={{ 
                  color: 'var(--secondary-color)', 
                  textDecoration: 'underline',
                  fontSize: '14px'
                }}
              >
                {bgmPlaying ? '暂停音乐' : '播放背景音乐'}
              </Button>
            </div>
          </Space>
        </div>
      </Content>
    </Layout>
  );
};

export default Home;
